<template>
	<view class="container">
		<up-navbar :fixed="false">
		<template #left>
			<h1 class="navbar-title">练习</h1>
			<p class="sub-title">专项练习，飞速提分</p>
		</template>
		</up-navbar>
		<view class="plan">
			<p>Hi,小鱼泡泡同学，为自己指定学习计划吧！</p>
			<view class="plan-btn">
				<up-button shape="circle" type="primary" text="制定计划"></up-button>
			</view>
		</view>
		<up-tabs :list="tabls" @click="onTabChanged" ></up-tabs>
		<up-list>
			<up-list-item>
				<up-cell title="四级高级词汇">
					<template #icon>
						<up-image radius="8px" width="80" height="90" src="https://cdn.uviewui.com/uview/album/1.jpg" mode="aspectFill"></up-image>
					</template>
					<template #label>
						<p class="describe">共360词</p>
						<view class="user-group">
							<up-avatar-group
							            :urls="users"
							            size="24"
							            gap="0.4"
							    ></up-avatar-group>
								<up-text text="有368位同学正在学习" size="12"></up-text>
						</view>
						
					</template>
					<template #right-icon>
						<up-button shape="circle" type="primary" text="立即学习" size="small"></up-button>
					</template>
				</up-cell>
			</up-list-item>
			<up-list-item>
				<up-cell title="四级高级词汇">
					<template #icon>
						<up-image radius="8px" width="80" height="90" src="https://cdn.uviewui.com/uview/album/1.jpg" mode="aspectFill"></up-image>
					</template>
					<template #label>
						<p class="describe">共360词</p>
						<view class="user-group">
							<up-avatar-group
							            :urls="users"
							            size="24"
							            gap="0.4"
							    ></up-avatar-group>
								<up-text text="有368位同学正在学习" size="12"></up-text>
						</view>
						
					</template>
					<template #right-icon>
						<up-button shape="circle" type="primary" text="立即学习" size="small"></up-button>
					</template>
				</up-cell>
			</up-list-item>
		</up-list>
	</view>
</template>

<script setup>
	import { reactive } from 'vue'
	const tabls = reactive([
	  { name: '词汇', path: '/pages/vocabulary/index', completed: true },
	  { name: '语法', path: '/pages/grammar/index', completed: false },
	  { name: '阅读', path: '/pages/reading/index', completed: true },
	  { name: '听力', path: '/pages/listening/index', completed: false },
	  { name: '写作', path: '/pages/writing/index', completed: false },
	  { name: '口语', path: '/pages/speaking/index', completed: false }
	])
	const users = reactive([  
    'https://uview-plus.jiangruyi.com/uview-plus/album/1.jpg',  
    'https://uview-plus.jiangruyi.com/uview-plus/album/2.jpg',  
    'https://uview-plus.jiangruyi.com/uview-plus/album/3.jpg', 
]);  
	const onTabChanged = ()=>{
		
	}
</script>

<style lang="scss">
:deep(.container){
	.u-navbar__content__left{
		display: flex;
		flex-direction: column;
		align-items: start
	}
	
}

.navbar-title{
	font-size: 48rpx;
	font-weight: bold;
}
.sub-title{
	font-size: 24rpx;
	line-height: 180%;
	color: #999;
}
.plan{
	display: flex;
	padding: 30rpx;
	gap: 20rpx;
	p{
		flex: 1;
	}
	.plan-btn{
		width: 180rpx;
	}
}
:deep(.u-cell){
	.u-cell__body__content{
		gap:20rpx;
		line-height: 180%;
		.describe{
			color: #999;
		}
		.user-group{
			margin-top: 20rpx;
			display: flex;
			gap: 10rpx;
		}
	}
}
</style>
